<script setup lang="ts">
import {ref} from "vue";
import {captchaApi} from "@/api/captcha_api";

interface Props {
  modelValue: string
  defaultShow?: boolean
}

const props = defineProps<Props>()
const emits = defineEmits(["update:modelValue"])
const img = ref()

async function getCaptcha() {
  const res = await captchaApi()
  img.value = res.data.image
  emits("update:modelValue", res.data.imageId)
}

defineExpose({
  getCaptcha,
})

if (props.defaultShow){
  getCaptcha()
}

</script>

<template>
  <img @click="getCaptcha" class="captcha_img" :src="img" alt="">
</template>